import React, { FC, JSXElementConstructor, PropsWithChildren, ReactElement, useState } from 'react'
import { isWechat, deviceDecide } from '@/utils/domTool'
import { Dialog } from 'antd-mobile'
//import { useTitle } from 'ahooks'

interface IHeaderParam {
  cb: () => void
  headerText: string
  comfirmMsg?: string
  notHeaderColor?: boolean
  headerColor?: string
  rightNode?: ReactElement
}
const welfare: FC<PropsWithChildren<IHeaderParam>> = (props) => {
 // useTitle(props.headerText, { restoreOnUnmount: true }) // document.title = props.headerText
  const isWechatStatus =
    deviceDecide.isWechat() || deviceDecide.isWechatProgram() 
  return (
    <>
      {isWechatStatus && !props.rightNode ? null : (
        <div className="relative top-0 w-full h-r4.4  leading-r4.4  ">
          <div
            className={
              ' fixed z-1000 top-0 w-r37.5 h-r4.4 leading-r4.4 ' +
              (!props.notHeaderColor ? props.headerColor || 'bg-gray-F7F7F8' : '')
            }
          >
            {!isWechatStatus ? (
              <>
                {' '}
                <span
                  className=" absolute  left-r1.6 h-r4.4 w-r3.0 "
                  onClick={() => {
                    if (props.comfirmMsg) {
                      Dialog.confirm({
                        bodyStyle: {
                          width: '28rem',
                          height: '14.4rem',
                          textAlign: 'center',
                          paddingTop: '2rem',
                        },
                        content: (
                          <span className=" block relative top-r1.0 text-r1.6 text-gray-333333 font-medium-family font-medium text-center ">
                            {props.comfirmMsg}
                          </span>
                        ),
                        onConfirm: () => {
                          props.cb()
                        },
                        onCancel: () => {
                          return
                        },
                        cancelText: (
                          <span className="relative -top-r1.0 shadow-bs2   left-1/2 transform -translate-x-1/2 text-r1.4 leading-r4.0 h-r4.0 w-r11.2 text-gray-333333 font-normal rounded-r2.0  bg-gray-999999 bg-opacity-10 inline-block text-center ">
                            取消
                          </span>
                        ),
                        confirmText: (
                          <span className="relative -top-r1.0 shadow-bs4   left-1/2 transform -translate-x-1/2 text-r1.4 leading-r4.0 h-r4.0 w-r11.2 text-white rounded-r2.0  bg-gradient-to-r from-orange-FF664F to-orange-FF3627 inline-block text-center ">
                            确定
                          </span>
                        ),
                      })
                    } else {
                      props.cb()
                    }
                  }}
                >
                  <i className=" text-r1.8 iconfont icon-xiangzuo"> </i>
                </span>
                <span className=" leading-r4.4 font-bold text-r1.8 ml-r5.0 font-hansans">
                  {props.headerText}
                </span>
              </>
            ) : null}

            {props.rightNode ? props.rightNode : null}
          </div>
          {props.children}
        </div>
      )}
    </>
  )
}

export default welfare
